<template>
  <div class="header">
    <!-- <img src="https://wmskr-erps.oss-cn-hangzhou.aliyuncs.com/adv/adv1.jpg" alt="" class="header-adv"> -->
    <div class="container advertising header-adv" v-if="banner">
      <NuxtLink v-if="banner.url" :to="banner.url.split('pages/').join('')">
        <el-image fit="cover" :src="banner.resources.img" />
      </NuxtLink>
      <el-image v-else fit="cover" :src="banner.resources.img" />
    </div>
    <!-- 顶部导航-->
    <div class="site-topbar">
      <div class="container">
        <div class="topbar-nav">
          <div class="menu hap_lang">
            <!-- <div class="li">{{$t('header.top.wechat_mini_program')}}222
              <div class="appcode">
                <img class="padding" src="~/assets/img/miniweixin.jpg"/>
                <p>{{$t('header.top.wechat_mini_program')}}</p>
              </div>
            </div> -->
            <!-- <div class="li">{{$t('header.top.h5')}}
              <div class="appcode">
                <img src="~/assets/img/h5.png"/>
                <p>{{$t('header.top.h5')}}</p>
              </div>
            </div> -->
            <a style="cursor:pointer" href="JavaScript:;" data-lang="ko"><img src="../assets/img/icon/ko.svg" /></a>
            <a style="cursor:pointer" href="JavaScript:;" data-lang="en"><img src="../assets/img/icon/en-us.svg" /></a>
            <a style="cursor:pointer" href="JavaScript:;" data-lang="zh-CN"><img
                src="../assets/img/icon/zh-CN.svg" /></a>
            <a style="cursor:pointer" href="JavaScript:;" data-lang="ja"><img src="../assets/img/icon/ja.svg" /></a>
            <a style="cursor:pointer" href="JavaScript:;" data-lang="es"><img src="../assets/img/icon/es.svg" /></a>
            <a style="cursor:pointer" href="JavaScript:;" data-lang="vi"><img src="../assets/img/icon/vi.svg" /></a>
            <!-- <div class="li">{{$t('header.top.app')}}
              <div class="appcode">
                <img src="~/assets/img/android.png"/>
                <p>{{$t('header.top.android')}}</p>
              </div>
            </div> -->
          </div>
          <div class="login">
            <!-- 固定图标 -->
            <div class="gnb_mmbrs">
              <div class="gnb_mmbrs_badge">
                <span class="badge_txt">Hot</span>
              </div>
              <span class="gnb_mmbrs_txt">회원가입 하면 무료배송를 지원합니다 </span>
            </div>
            <template v-if="user.cellphone">
              <div class="li user" :class="{ 'user-active': userActive }" @mouseenter="userMenu"
                @mouseleave="userMenuOut">
                <NuxtLink to="/user/portal" class="user-name"><span>{{ user.cellphone }}</span><i
                    class="iconfont dsshop-xia"></i></NuxtLink>
                <el-collapse-transition>
                  <div class="user-menu-wrapper" v-show="userActive">
                    <ul class="user-menu">
                      <li>
                        <NuxtLink class="a" to="/user/portal">개인정보</NuxtLink>
                      </li>
                      <li>
                        <NuxtLink class="a" to="/user/collect">찜 스토리</NuxtLink>
                      </li>
                      <li>
                        <div class="a" @click="logout">로그아웃</div>
                      </li>
                    </ul>
                  </div>
                </el-collapse-transition>
              </div>
              <NuxtLink class="li" to="/user/indent/list">주문목록</NuxtLink>
            </template>
            <template v-else>
              <div class="li" @click="goLogin">로그인</div>
              <NuxtLink class="li" to="/pass/register">회원가입</NuxtLink>
            </template>
            <NuxtLink class="li" to="/user/notice/list">Notice</NuxtLink>
            <!-- <NuxtLink class="li" v-for="locale in availableLocales" :key="locale.code" :to="switchLocalePath(locale.code)"
              ><span @click="handleChangeLang(locale.code)">{{ locale.name }}</span></NuxtLink
            > -->
            <div class="icon-flex">
              |
              <NuxtLink to="/user/collect">
                <div class="icon ty_sm icon_heart"></div>
              </NuxtLink>

              <NuxtLink to="/user/portal">
                <div class="icon ty_sm icon_person"></div>
              </NuxtLink>
              <a href="https://track.shiptrack.co.kr/" target="_blank">
                <div class="icon ty_sm icon_truck"></div>
              </a>
              <div class="cart" :class="{ on11: shoppingCart.length > 0 }" @mouseenter="userCart"
                @mouseleave="userCartOut">
                <NuxtLink :to="{ path: '/cart' }">
                  <!-- {{ '장바구이' }}({{ $nuxt.$store.state.shoppingCartNumber }}) -->
                  <div class="cart-navigation"><i class="icon icon_cart"></i></div>
                </NuxtLink>
                <el-collapse-transition>
                  <div class="cart-box" v-show="cartActive" v-loading="cartLoading">
                    <template v-if="shoppingCart.length > 0">
                      <div class="cart-list">
                        <div class="cart-li" v-for="(item, index) in shoppingCart" :key="index">
                          <NuxtLink class="image" :to="{ path: `/product/detail/${item.good_id}` }">
                            <el-image :src="item.img" fit="scale-down" />
                          </NuxtLink>
                          <NuxtLink :to="{ path: `/product/detail/${item.good_id}` }" class="title">
                            {{ item.name }}
                          </NuxtLink>
                          <div class="price">{{ item.price }}원 × {{ item.number }}</div>
                          <div class="close"><i class="el-icon-delete" @click="deleteCart(index)"></i></div>
                          <div class="invalid" v-if="item.invalid">
                            상품 가 만료되었습니다.
                          </div>
                        </div>
                      </div>
                      <div class="cart-total">
                        <div class="number">
                          <!-- <div class="name">{{ (`총${number}개상품`, { number: $nuxt.$store.state.shoppingCartNumber }) }}</div> -->
                          <div class="price">
                            <span>{{ shoppingTotal }}</span>원
                          </div>
                        </div>
                        <div class="operation">
                          <NuxtLink :to="{ path: '/cart' }"><el-button type="danger">장바구니에 가서 결제하기</el-button>
                          </NuxtLink>
                        </div>
                      </div>
                    </template>
                    <template v-else>
                      <div class="msg-empty">장바구니에 아직 상품이 없어서 얼른 골라보세요!</div>
                    </template>
                  </div>
                </el-collapse-transition>
              </div>
              <div class="icon ty_sm icon_eye"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 顶部导航 end-->

  </div>
</template>

<style lang="scss" scoped>
@import './scss/Header';
</style>

<script>
import js from './js/Header'
export default js
</script>
